<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <title>企鹅系统首页</title>
    <style>
        table {
            width: 70%;
            font-size: 14px;
            table-layout: fixed;
            empty-cells: show;
            border-collapse: collapse;
            margin: 0 auto;
            border: 1px solid #0099ff;
            color: #666;
        }

        th {
            background-color: #00ccff;
            background-repeat: repeat-x;
            height: 30px;
            overflow: hidden;
        }

        td {
            height: 20px;
        }

        td, th {
            border:1px solid #00ccff;
            padding: 0 1em 0;
        }
        tr:nth-child(even) {
            background-color: #f0f8ff;
        }

        .ws-container {
            position: relative;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="ws-container">
    <h3>恭喜，您已经成为企鹅系统用户！</h3>
    <p>http://www.thymeleaf.org/extras/spring-security</p>
    <p>https://www.thymeleaf.org/thymeleaf-extras-springsecurity5</p>
    <div class="mt-2">用户: <span sec:authentication="principal.username"></span></div>
    <div class="mt-2">权限和角色: <span sec:authentication="principal.authorities"></span></div>
    <div class="mt-2">客户端地址: <span sec:authentication="details.remoteAddress"></span></div>
    <div class="mt-2">SessionId: <span sec:authentication="details.sessionId"></span></div>

    <table lay-filter="parse-table-demo">
        <thead>
        <tr>
            <th lay-data="{field:'index', width:150}">序号</th>
            <th lay-data="{field:'fullName', width:150}">姓名</th>
            <th lay-data="{field:'Email', minWidth: 180}">Email</th>
            <th lay-data="{field:'createdDate', minWidth: 180}">创建日期</th>
            <th lay-data="{field:'Operate', minWidth: 180}">操作</th>
        </tr>
        </thead>
        <tbody th:each="user,userStat:${userList}">
        <tr>
            <td th:text="${userStat.index+1}"></td>
            <td th:text="${user.fullName}"></td>
            <td th:text="${user.email}"></td>
            <td th:text="${#dates.format(user.createdAt,'yyyy-MM-dd HH:mm:ss')}"></td>
            <td><a sec:authorize="hasAuthority('READ_USER_PRIVILEGE')">查看</a>
                <a sec:authorize="hasAuthority('WRITE_USER_PRIVILEGE')">编辑</a>
                <a sec:authorize="hasAuthority('ROLE_ADMIN')">删除</a></td>
        </tr>
        </tbody>
    </table>
    <img th:src="@{/img/users/zhangyusheng3.webp}" alt="美女图片">
    <form th:action="@{/logout}" method="post">
        <input type="submit" value="退出"/>
    </form>
</div>
<script>
    layui.use(function () {
        var table = layui.table;
        var util = layui.util;
        // 事件
        util.on('lay-on', {
            parseTable: function () {
                // 转化静态表格
                table.init('parse-table-demo', {
                    // height: ''
                });
            }
        });
    });
</script>
</body>
</html>